<template>
	<view>

		<scroll-view :scroll-y="true" class="add-quotient">
			<view class="form-content-box">
				

			<view v-for="item in detail" :key="item.id" class="form-content">
				<view class="form-item">
					<view class="form-label">
						网点名称
					</view>
					<view class="form-input">
						{{item.dotName}}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						选商名称
					</view>
					<view class="form-input">
						{{item.customerName}}
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						行业背景
					</view>
					<view class="form-input">
						<!-- {{form.industry}} -->
						<text v-if="item.industry==1">家居建材</text>
						<text v-if="item.industry==0">非家居建材</text>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						电话
					</view>
					<view class="form-input">
						{{item.customerPhone}}
					</view>
				</view>
				<view class="form-item" v-if="item.brand">
					<view class="form-label">
						品牌品类
					</view>
					<view class="form-input">
						{{item.brand}}
					</view>
				</view>
				<view class="form-item" v-if="item.isStore!=''">
					<view class="form-label">
						是否有店
					</view>
					<view class="form-input">
						<text v-if="item.isStore==1">是</text>
						<text v-if="item.isStore==0">否</text>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						洽谈方式
					</view>
					<view class="form-input">
						{{item.contractName}}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						洽谈进度
					</view>
					<view class="form-input">
						{{item.progressName}}
					</view>
				</view>
				<view class="form-item" v-if="item.storeTypeName">
					<view class="form-label">
						店面类型
					</view>
					<view class="form-input">
						{{item.storeTypeName}}
					</view>
				</view>
				<view class="form-item" v-if="item.strPlanSigningTime">
					<view class="form-label">
						预计签约时间
					</view>
					<view class="form-input">
						{{item.strPlanSigningTime}}
					</view>
				</view>
				<view class="form-item" v-if="item.talkInfo">
					<view class="form-label">
						洽谈内容
					</view>
					<view class="form-input">
						{{item.talkInfo}}
					</view>
				</view>
				<view class="form-item" v-if="item.suspendReason">
					<view class="form-label">
						终止原因
					</view>
					<view class="form-input">
						{{item.suspendReason}}
					</view>
				</view>
				<view class="form-item" v-if="item.updateTime">
					<view class="form-label">
						终止时间
					</view>
					<view class="form-input">
						{{item.updateTime.slice(0,10)}}
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						创建时间
					</view>
					<view class="form-input">
						{{item.createTime.slice(0,10)}}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						创建人
					</view>
					<view class="form-input">
						{{item.custName}}
					</view>
				</view>


			</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getLogByMerchantCode,
		getSystemDictData,
		followupApprove
	} from '@/common/service.js'
	export default {
		data() {
			return {
				cancelShow: false,
				id: '',
				detail: [],
				merchantCode: ''

			}
		},
		onLoad(options) {
			this.merchantCode = options.merchantCode
			this.getDetail()
		},
		methods: {
			refresh() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
					uni.$emit('getList', true)
				}, 2000)

			},
			approve() {
				if (!this.form.writeText) {
					uni.showToast({
						icon: 'none',
						title: '请输入批示内容'
					})
					return
				}
				let data = {
					logCode: this.detail.logCode,
					approveInfo: this.form.writeText,
					roleName: this.CONFIG.user.position
				}
				followupApprove(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							uni.showToast({
								icon: 'none',
								title: '批示成功'
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getContractType() {
				let data = 'COOPERATE_STORE_TYPE'
				getSystemDictData(data,
					(res) => {

						this.storeTypeList = res.data.data

						this.detail.map(i => {
							if (i.storeType) {
								this.storeTypeList.map(item => {

									if (item.dictValue == i.storeType) {

										i.storeTypeName = item.dictLabel
										this.$forceUpdate();
									}
								})
							}
						})
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getContractMethod() {
				let data = 'negotiation_method'
				getSystemDictData(data,
					(res) => {

						this.contractList = res.data.data


						this.detail.map(i => {
							if (i.contract) {
								this.contractList.map(item => {

									if (item.dictValue == i.contract) {

										i.contractName = item.dictLabel
										this.$forceUpdate();
									}
								})
							}
						})
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getDictList() {
				let data = 'negotiation_progress'
				getSystemDictData(data,
					(res) => {

						this.progressList = res.data.data
						this.detail.map(i => {
							if (i.progress) {
								this.progressList.map(item => {

									if (item.dictValue == i.progress) {

										i.progressName = item.dictLabel
										this.$forceUpdate();
									}
								})
							}
						})

					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getDetail() {
				console.log(this.id);

				let data = {
					merchantCode: this.merchantCode
				}
				getLogByMerchantCode(data, (res) => {
					console.log(res)
					// return ;
					this.detail = res.data.data
					this.detail.map(item => {
						item.dotName = item.marketName
						item.outletsCode = item.outletsCode
						item.customerName = item.customerName
						item.merchantCode = item.merchantCode
						item.contract = item.talkType
						item.progress = item.talkProgress
						item.talkInfo = item.talkInfo
						item.storeType = item.storeType
						item.strPlanSigningTime = item.planSigningTime
						item.suspendReason = item.suspendReason
					})

					this.getDictList()
					this.getContractMethod()
					this.getContractType()
				}, (e) => {
					this.$refs.uToast.show({
						title: e,
						type: "error",
						duration: 3000,
					});
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.add-quotient {
		height: 100vh;
		background-color: #F3F5F7;
		// padding-top: 10rpx;
		background-color: #fff;
		// padding-bottom: 0;
		.form-content-box{
			padding: 30rpx;
		}
		.form-content {
			margin-bottom: 20rpx;
			border-bottom: 2px solid #eee;
		}
		.form-content:nth-last-of-type(1){
			border-bottom: none;
		}

		.form-item {
			display: flex;
			margin-bottom: 26rpx;
		}

		.form-label {
			color: #666;
			width: 180rpx;
			margin-right: 10rpx;
			// text-align-last: justify;
		}

		.form-input {
			flex: 1;
			padding: 0 15rpx;
		}

		.form-radio {
			flex: 1;
			padding: 0 15rpx;
		}


		.submit-wrap {
			width: 100vw;
			height: 120rpx;
			background-color: #fff;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 100%;
				height: 90rpx;
				border-radius: 54rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				font-weight: 600;
			}

			.submit {
				background-color: #1DC883;
				color: #fff;

			}
		}
	}

	.submitpup {
		width: 630rpx;
		height: 292rpx;
		padding-top: 70rpx;

		.content-wrap {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			text-align: center;
		}
	}

	.cancelpup {
		width: 630rpx;
		height: 606rpx;
		padding-top: 30rpx;

		.title {
			color: #333333;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;

		}

		.tip {
			width: 100%;
			padding: 30rpx;
			color: #333;
		}
	}

	.pup-btn-wrap {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #F7F7F7;
		display: flex;

		.pup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666666;
			font-weight: 600;
			flex: 1;
			height: 100%;
		}

		.pup-submit {
			color: #1DC883;
			border-left: 1px solid #F7F7F7;
		}
	}

	.textarea-box {
		width: 100%;
		padding: 10rpx;
		background-color: #F7F7F7;
	}

	/deep/.u-mode-center-box {
		border-radius: 20rpx;
	}

	.write-wrap {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;

		.title {
			font-size: 32rpx;
			color: #000;
			font-weight: 600;
		}

		.write-content {
			margin-top: 20rpx;
			width: 100%;
			border-radius: 18rpx;
			background: #f5f5f5;
			padding: 20rpx 20rpx 0 20rpx;
		}

		.write-info {
			margin-top: 20rpx;
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			align-items: center;

			.write-author {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: #333;
				font-weight: 600;
			}

			.write-line {
				height: 30rpx;
				width: 2rpx;
				background-color: #D8D8D8;
			}
		}
	}
</style>